<template>
   <div class="Chart">
       <div ref="chartRef" style="width: 483px; height: 252px"></div>
   </div>
</template>

<script>
import * as echarts from 'echarts'
import { shallowRef, onMounted,watch} from "vue";
export default {
    props:{
        option: {
          type: Object,
          required: true
        },
    },
    setup(props){
       const chart = shallowRef();
       const chartRef = shallowRef();  // 对象声明用响应式
       onMounted(()=>{
           chart.value = echarts.init(chartRef.value)
           chart.value.setOption(props.option);
           window.onresize = () => { // 自适应大小 可缩放
            chart.value.resize();    
           };     
       });
        const chartdata = (option) => {
          chart.value.setOption(option);   
        }                           // 获取数据加载
        watch(
            props.option,
            () => {
                chart.value.setOption(props.option);
            },
            { deep: true }
        );
       return {chartRef,chartdata}
    }
    
}
</script>

<style>

</style>